<!-- 物联网数据 -->
<template>
  <div class="app-container">
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form ref="form" :inline="true" :model="form" class="form-bottom-line" label-width="80px">
          <el-form-item v-if="showTopMenu" label="选择单位:">
            <el-select v-model="form.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="handleFilter" >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="data-container">
        <!-- 左右滑动的菜单 -->
        <div class="data-list">
          <ul>
            <li v-for="item in list" :key="item.index" @click="dataListFn(item.name)">
              <div class="item-left">
                <img :src="item.imgUrl" alt="">
                <span>{{ item.name }}</span>
              </div>
              <div class="item-right">
                <ul>
                  <li v-for="statisticsItem in item.statisticsNameList" :key="statisticsItem.index">
                    <span>{{ statisticsItem.name }}</span><span>{{ statisticsItem.value }}</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
          <div class="btn-left"><i class="el-icon-arrow-left" @click="leftFn"/></div>
          <div class="btn-right"><i class="el-icon-arrow-right" @click="rightFn"/></div>
        </div>
        <!-- 菜单下面的内容 -->
        <automaticautomatic v-if="acitveName == '火灾自动报警'"/>
        <sprinklerfireExtinguishing v-if="acitveName == '自动喷水灭火'"/>
        <fireWaterSupplyAndHydrant v-if="acitveName == '消防给水及消防栓'"/>
        <mechanicalSmokeControl v-if="acitveName == '机械防排烟'"/>
        <smartElectricityConsumption v-if="acitveName == '电气火灾监控系统'"/>
      </div>
    </div>
  </div>
</template>
<script>
import { deviceNumber } from '@/api/internetData'
import { getSocialUnit } from '@/api/company'
import $ from 'jquery'
// 火灾报警系统
import automaticautomatic from './components/automaticautomatic.vue'
// 自动喷水灭火
import sprinklerfireExtinguishing from './components/sprinklerfireExtinguishing.vue'
// 消防给水及消防栓
import fireWaterSupplyAndHydrant from './components/fireWaterSupplyAndHydrant.vue'
// 机械防排烟
import mechanicalSmokeControl from './components/mechanicalSmokeControl.vue'
// 智慧用电
import smartElectricityConsumption from './components/smartElectricityConsumption.vue'

import internetData1 from '@/assets/internetData/internetData1.png'
import internetData2 from '@/assets/internetData/internetData2.png'
import internetData3 from '@/assets/internetData/internetData3.png'
import internetData4 from '@/assets/internetData/internetData4.png'
import internetData5 from '@/assets/internetData/internetData5.png'
import internetDataActive1 from '@/assets/internetData/internetDataActive1.png'
import internetDataActive2 from '@/assets/internetData/internetDataActive2.png'
import internetDataActive3 from '@/assets/internetData/internetDataActive3.png'
import internetDataActive4 from '@/assets/internetData/internetDataActive4.png'
import internetDataActive5 from '@/assets/internetData/internetDataActive5.png'
const statusMap = {
  10: '单位10',
  12: '单位12',
  20: '单位20',
  30: '单位30',
  40: '单位40',
  50: '单位50',
  60: '单位60',
  70: '单位70',
  80: '单位80',
  90: '单位90'
}
export default {
  name: 'Order',
  components: {
    automaticautomatic,
    sprinklerfireExtinguishing,
    fireWaterSupplyAndHydrant,
    mechanicalSmokeControl,
    smartElectricityConsumption
  },
  data() {
    return {
      internetData1,
      internetData2,
      internetData3,
      internetData4,
      internetData5,
      internetDataActive1,
      internetDataActive2,
      internetDataActive3,
      internetDataActive4,
      internetDataActive5,
      acitveName: '火灾自动报警',
      showTopMenu: false,
      form: {
        corp_id: '',
        corp_name: ''
      },
      left: 40,
      leftNum: 0,
      statusMap,
      companyList: [],
      list: [{
        name: '火灾自动报警',
        imgUrl: internetDataActive1,
        statisticsNameList: [{
          name: '主机',
          value: ''
        }, {
          name: '火警点位',
          value: ''
        }, {
          name: '故障点位',
          value: ''
        }, {
          name: '屏蔽点位',
          value: ''
        }]
      }, {
        name: '自动喷水灭火',
        imgUrl: internetData2,
        statisticsNameList: [{
          name: '供水设施',
          value: ''
        }, {
          name: '湿式报警阀',
          value: ''
        }, {
          name: '管网',
          value: ''
        }, {
          name: '末端试水',
          value: ''
        }]
      }, {
        name: '消防给水及消防栓',
        imgUrl: internetData3,
        statisticsNameList: [{
          name: '供水设施',
          value: ''
        }, {
          name: '末端试水',
          value: ''
        }, {
          name: '储水设施',
          value: ''
        }, {
          name: '管网',
          value: ''
        }]
      }, {
        name: '机械防排烟',
        imgUrl: internetData4,
        statisticsNameList: [{
          name: '消防风机',
          value: ''
        }, {
          name: '排烟窗',
          value: ''
        }, {
          name: '管道',
          value: ''
        }, {
          name: '阀门',
          value: ''
        }]
      }, {
        name: '电气火灾监控系统',
        imgUrl: internetData5,
        statisticsNameList: [{
          name: '监控主机',
          value: ''
        }, {
          name: '',
          value: ''
        }, {
          name: '控制设备',
          value: ''
        }, {
          name: '智能电表',
          value: ''
        }]
      }]
    }
  },
  created() {
    this.getCompanyList()
    const that = this
    this.getList()
    this.$nextTick(function() {
      const dataLength = $('.data-list').width()
      const dataUlLength = $('.data-list>ul').width()
      if (dataLength > dataUlLength) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      } else {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#409EFF'
        })
      }
      $('.data-list>ul').css({
        width: this.list.length * 292 + 'px'
      })
      $('.data-list>ul>li').eq(0).addClass('active')
      $('.data-list>ul>li').click(function() {
        const index = $(this).index()
        $(this).addClass('active')
        $(this).siblings().removeClass('active')
        this.acitveName = $(this).attr('name')
        for (var i = 0; i < that.list.length; i++) {
          if (index === i) {
            that.list[i].imgUrl = that['internetDataActive' + (index + 1)]
          } else {
            that.list[i].imgUrl = that['internetData' + (i + 1)]
          }
        }
      })
    })
  },
  methods: {
    // 查询
    handleFilter() {
      this.getList()
    },
    getList() {
      const that = this
      deviceNumber()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            for (var item in data.data) {
              // 火灾报警
              if (item === 'FAS') {
                this.list[0].statisticsNameList[0].value = data.data[item].hostNumber
                this.list[0].statisticsNameList[1].value = data.data[item].firePoint
                this.list[0].statisticsNameList[2].value = data.data[item].faultPoint
                this.list[0].statisticsNameList[3].value = data.data[item].shieldPoint
              }
              // 自动喷水灭火
              if (item === 'Sprinkler') {
                this.list[1].statisticsNameList[0].value = data.data[item].waterDelivery
                this.list[1].statisticsNameList[1].value = data.data[item].ZSFZ
                this.list[1].statisticsNameList[2].value = data.data[item].pipeNetwork
                this.list[1].statisticsNameList[3].value = data.data[item].ZSPM
              }
              // 消防给水及消防栓
              if (item === 'FwsAndFh') {
                this.list[2].statisticsNameList[0].value = data.data[item].waterDelivery
                this.list[2].statisticsNameList[1].value = data.data[item].waterStorage
                this.list[2].statisticsNameList[2].value = data.data[item].pipeNetwork
                this.list[2].statisticsNameList[3].value = data.data[item].ZSPM
              }
              // 机械防排烟
              if (item === 'MscS') {
                this.list[3].statisticsNameList[0].value = data.data[item]['XTF-I']
                this.list[3].statisticsNameList[1].value = data.data[item].ventWindow
                this.list[3].statisticsNameList[2].value = data.data[item].pipeline
                this.list[3].statisticsNameList[3].value = data.data[item].Valve
              }
              // 智慧用电
              if (item === 'EemS') {
                this.list[4].statisticsNameList[0].value = data.data[item].monitoringHost
                this.list[4].statisticsNameList[2].value = data.data[item].monitoringEquipment
                this.list[4].statisticsNameList[3].value = data.data[item].intelligentMeter
              }
            }
          } else {
            that.$message.warning(response.data.message)
          }
        })
        .catch(() => {
        })
    },
    // 点击右侧按钮
    rightFn() {
      const dataLength = $('.data-list').width()
      const dataUlLength = $('.data-list>ul').width()
      const max = ((this.list.length - 3) * 290 - 40) * -1
      if (dataLength > dataUlLength) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      } else if (this.left <= 40 && this.left > max) {
        this.leftNum--
        this.left = 290 * this.leftNum + 40
        $('.data-list ul').animate({ left: this.left }, 800)
      }
      if (this.leftNum !== 0) {
        $('.el-icon-arrow-left').css({
          color: '#409EFF'
        })
      }
      if ((290 * this.leftNum - 290 + 40) < max) {
        $('.el-icon-arrow-left').css({
          color: '#409EFF'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      }
    },
    // 点击左侧按钮
    leftFn() {
      const dataLength = $('.data-list').width()
      const dataUlLength = $('.data-list>ul').width()
      const max = ((this.list.length - 3) * 290 - 40) * -1
      if (dataLength > dataUlLength) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
        $('.el-icon-arrow-right').css({
          color: '#B8AEAE'
        })
      } else if (this.left >= max && this.left < 40) {
        this.leftNum++
        this.left = 290 * this.leftNum + 40
        $('.data-list ul').animate({ left: this.left }, 800)
        $('.el-icon-arrow-left').css({
          color: '#409EFF'
        })
        $('.el-icon-arrow-right').css({
          color: '#409EFF'
        })
      }
      if (this.leftNum === 0) {
        $('.el-icon-arrow-left').css({
          color: '#B8AEAE'
        })
      }
    },
    dataListFn(name) {
      this.acitveName = name
    },
    // 单位下拉框查询
    getCompanyList() {
      const that = this
      getSocialUnit()
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.companyList = []
            that.companyList = response.data.data
            that.showTopMenu = true
          } else if (response.data.code === 40003 && response.data.message === '权限验证失败!') {
            that.showTopMenu = false
          } else {
            that.$message.warning(response.data.message)
          }
        })
        .catch(() => {
          that.companyList = []
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.more{
  color: #409EFF;
}
.data-container{
   overflow: hidden;
   li{
     list-style: none;
   }
  .data-list{
    position: relative;
    padding: 0 40px;
    height: 106px;
    overflow: hidden;
    margin-bottom: 40px;
    > div{
      width: 40px;
      height: 106px;
      line-height: 106px;
      position: absolute;
      top: 0px;
      color: #B4AEAE;
      font-size: 26px;
      background: #FFFFFF;
      i{
        cursor: pointer;
      }
    }
    .btn-left{
      left: 0;
    }
    .btn-right{
      right: 0;
    }
    > ul{
      padding: 0;
      margin: 0;
      overflow: hidden;
      width: 1350px;
      height: 106px;
      position: absolute;
      left: 40px;
      top: 0;
      > li{
        width: 282px;
        height: 106px;
        float: left;
        font-size: 14px;
        border: 1px solid #AAAAAA;
        border-radius: 5px;
        padding-right: 10px;
        box-sizing: border-box;
        margin-right: 8px;
        cursor: pointer;
        .item-left{
          width: 120px;
          float: left;
          text-align: center;
          margin-right: 10px;
          padding-top: 10px;
          .svg-icon{
            font-size: 50px;
            margin-bottom: 10px;
            color: #AAAAAA;
          }
          span{
            display: block;
            width: 120px;
            height: 22px;
            line-height: 22px;
          }
        }
        .item-right{
          width: 140px;
          float: left;
          ul{
            padding: 0;
            margin: 0;
            overflow: hidden;
          }
          li{
            width: 70px;
            float: left;
            margin-top: 10px;
            span{
              display: block;
              height: 20px;
            }
          }
        }
      }
      > li.active{
        color: #4BCBFD;
        border-color: #4BCBFD;
        .svg-icon{
          color: #F32F32;
        }
      }
      > li:last-child{
        margin-right: 0px;
      }
    }
  }
}
</style>
